<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d旋转图</title>
		<style>
			body{
				display: flex;
				
				align-items: center;
				justify-content: center;
				flex-direction: column;
				height: 100vh;
				background-image: linear-gradient(to top,#9795f0 0%,#fbc8d4 100%);
				overflow: hidden;
			}
			.shell{
				position: relative;
				width: 60vw;
				height: 40vw;
				max-width: 280px;
				max-height: 350px;
				margin: 0;
				color: white;
				perspective: 1000px;
				transform-origin: center;
			}
			.content{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 100%;
				height: 100%;
				transform-origin: center;
				transform-style: preserve-3d;
				transform: translateZ(-30vw) rotateY(0);
				animation: carousel 9s infinite cubic-bezier(0.77,0,0.175,1) forwards;
			}
			.item{
				position: absolute;
				width: 60vw;
				height: 40vw;
				max-width: 280px;
				max-height: 350px;
				box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
				border-radius: 6px;
				background-size: cover;
				-webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%,rgba(255,255,255,0.3));
			}
			.item:nth-child(1){
				background-image: url(./img/3d图片/微信图片_20231116092720.jpg);
				transform: rotateY(0) translateZ(35vw);
			}
			.item:nth-child(2){
				background-image: url(./img/3d图片/微信图片_20231116092726.jpg);
				transform: rotateY(60deg) translateZ(35vw);
			}
			.item:nth-child(3){
				background-image: url(./img/3d图片/微信图片_20231116092730.jpg);
				transform: rotateY(120deg) translateZ(35vw);
			}
			.item:nth-child(4){
				background-image: url(./img/3d图片/微信图片_20231116092748.jpg);
				transform: rotateY(180deg) translateZ(35vw);
			}
			.item:nth-child(5){
				background-image: url(./img/3d图片/微信图片_20231116092754.jpg);
				transform: rotateY(240deg) translateZ(35vw);
			}
			.item:nth-child(6){
				background-image: url(./img/3d图片/微信图片_20231116092759.jpg);
				transform: rotateY(300deg) translateZ(35vw);
			}
			
			@keyframes carousel {
				0%,
				15%{
					transform: translateZ(-35vw) rotate();
				}
				
				20%,
				30%{
					transform: translateZ(-35vw)rotateY(-60deg);
				}
				
				35%,
				40%{
					transform: translateZ(-35vw) rotateY(-120deg);
				}
				
				45%,
				50%{
					transform: translateZ(-35vw)rotateY(-180deg);
				}
				55%,
				60%{
					transform: translateZ(-35vw)rotateY(-240deg);
				}
				65%,
				70%{
					transform: translateZ(-35vw)rotateY(-300deg);
				}
				75%,
				80%{
					transform: translateZ(-35vw)rotateY(-360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="shell">
			<div class="content">
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
			</div>
		</div>
	</body>
</html>